<template>
  <div class="qj-player-warp">
    <div class="execute-btn">
      <div class="left-btn">
        <i class="iconfont icon-kuaitui" @click="backPlay"></i>
      </div>
      <div class="play-btn">
        <i class="iconfont" :class="{'icon-icon-test':isPlay,'icon-tingzhi':!isPlay}" @click="suspended"></i>
      </div>
      <div class="left-btn">
        <i class="iconfont icon-kuaijin-copy" @click="inPlay"></i>
      </div>
      <i class="iconfont icon-shengying volume-btn" @click="volumeFn($event)"></i>
    </div>
    <div class="progress-warp">
      <div class="w" ref="progress">
        <span :style="{width:(directionInfo.width || 0)+'px'}"></span>
      </div>
      <div class="iconfont  btn" data-type="progress" ref="progressBtn" v-if="flag" :style="{left:(directionInfo.progress)+'px'}" v-drag="moveChange" @mouseup="moveMouseup"></div>
      <div class="time-box" :style="{left:(directionInfo.progress+10)+'px'}" v-if="isShowTime">{{playInfo.nCurentMinute || '00'}}:{{playInfo.nCurentSecond || '00'}}</div>
    </div>
    <p style="text-align: right;">{{playInfo.nCurentMinute || '00'}}:{{playInfo.nCurentSecond || '00'}}/{{playInfo.nMinute || '00'}}:{{playInfo.nSecond || '00'}}</p>
    <!-- <span class="iconfont icon-guanbi" @click="close"></span> -->
    <transition name="fade">
      <div class="volume" ref="volume" v-if="volomeFlag">
        <div class="w" ref="volumeHeight">
          <span :style="{top:(directionInfo.height)+'px'}"></span>
        </div>
        <div class="btn" data-type="volume" v-if="flag" :style="{top:(directionInfo.volume)+'px'}" v-drag="moveChange" ref="volumeBtn"></div>
      </div>
    </transition>
  </div>
</template>

<script>
/**
 * 播放器组件
 *  volomeFlag      是否显示音量条
 *  directionInfo   存储dom相关的坐标信息以及width和height
 *  flag            拖拽时重新渲染组件
 *  audio           播放器dom
 *  isPlay          是否播放
 *  playInfo        播放信息（时长/播放进度）
 *  domInfo         存储被拖拽父层dom信息
 *  url             播放url
 */
export default {
  data: function () {
    return {
      volomeFlag: false,
      directionInfo: {},
      flag: true,
      audio: null,
      isPlay: false,
      playInfo: {},
      domInfo: {},
      url: '',
      isShowTime: false
    }
  },
  /**
   * voiceUrl 播放路径
   */
  props: {
    voiceUrl: {
      type: String
    },
    show: Boolean
  },
  watch: {
    /**
     * 当路径改变时重新播放
     */
    voiceUrl: function (val) {
      this.audio.pause()
      val ? this.audio.init(val) : ''
      this.audioPlay()
      this.isPlay = false
    },
    /** 
     * 是否隐藏了该页面，隐藏就停止播放,show的值true为显示，false为隐藏
    */
    show: function(val){
      !val ? this.pauseAuido() : ''
    }
  },
  methods: {
    /**
     * 离开播放页面，暂停播放
     * author 赵美阳
     * date 2019-04-12
     */
    pauseAuido(){
      this.audio.pause()
    },
    /**
     * 是否显示音量条
     */
    volumeFn: function (e) {
      this.volomeFlag = !this.volomeFlag
      e.stopPropagation()
    },
    /**
     * 拖拽更改播放进度
     */
    moveChange: function (e) {
      this.isShowTime = true
      this.domInfo = e
      let { directionInfo } = this
      let { l, t, type, parentWidth, parentHeight, divWidth, divHeight } = e
      // 限制left值
      e.l = e.l <= 0 - (divWidth / 2) ? 0 - (divWidth / 2) : e.l
      e.l = e.l >= parentWidth - (divWidth / 2) ? parentWidth - (divWidth / 2) : e.l
      // 限制top值
      e.t = e.t <= 0 + (divHeight / 2) ? 0 + (divHeight / 2) : e.t
      e.t = e.t >= parentHeight - (divHeight + divHeight / 2) ? parentHeight - (divHeight + divHeight / 2) : e.t
      // 如果更改的是音量
      if (type === 'volume' && (directionInfo[type] = t, directionInfo['height'] = t - divHeight / 2)) {
        if (directionInfo.volume <= 0) {
          directionInfo.volume = 0
        } else if (directionInfo.volume > this.$refs.volumeHeight.offsetHeight) {
          directionInfo.volume = this.$refs.volumeHeight.offsetHeight
        }
        if (directionInfo.height < 0) {
          directionInfo.height = 0
        }
        this.directionInfo = directionInfo
      }
      //  更改的是播放进度
      type === 'progress' && this.audio.pause()
      //  计算音量比例
      let volume = 1 - (directionInfo['height'] / (parentHeight - divHeight * 2))
      //  计算播放比例
      let time = (l + divWidth / 2) / parentWidth
      type === 'volume' && this.audio.setVolume(volume)
      type === 'progress' && this.audio.setCurrentTime(time)
      //  重新渲染
      this.flag = false
      this.flag = true
      //  只有拖拽进度时播放
      if (type === 'progress'&&!this.isPlay) {
        this.audioPlay()
      }
    },
    /**
     * 开始暂停播放
     */
    suspended: function () {
      this.isPlay = !this.isPlay
      this.isPlay ? this.audio.pause() : this.audioPlay()
    },
    /**
     * 自动播放
     */
    audioPlay: function () {
      let { directionInfo } = this
      this.audio.play()
      this.audio.getAudioInfo((e) => {
        let { progressBtn, progress } = this.$refs
        this.playInfo = e
        if (progress) {
          directionInfo.width = progress.offsetWidth * e.nProportion
          directionInfo.progress = (progress.offsetWidth * e.nProportion) - (progressBtn.offsetWidth / 2)
        }
        this.audio.ended() && (this.audio.setCurrentTime(0), this.isPlay = true)        
      })
    },
    /**
     * 关闭播放器
     */
    close: function () {
      this.audio.pause()
      this.$emit('close')
    },
    /**
     * 快退播放
     */
    backPlay: function () {
      this.audio.backPlay(-5)
      this.isPlay ? this.audio.pause() : this.audioPlay()
    },
    /**
     * 快进播放
     */
    inPlay: function () {
      this.isPlay ? this.audio.pause() : this.audioPlay()
      this.audio.backPlay(5)
    },
    /**
     * @author 王磊
     * @information 隐藏滑动的时间
     * @date 2019-1-25 10:51
     */
    moveMouseup () {
      this.isShowTime = false
    }
  },
  mounted: function () {
    // 初始化播放器
    document.addEventListener('click', () => { this.volomeFlag = false })
    let audio = this.AudioPlayer().getInstance()()
    this.voiceUrl ? audio.init(this.voiceUrl) : ''
    this.audio = audio
    this.voiceUrl && this.audioPlay()
  }
}
</script>
